<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>登录页</title>
    <link rel="shortcut icon" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
    <div class="login-main">
        <header class="layui-elip">登录</header>
        <form class="layui-form">
            <div class="layui-input-inline">
                <input type="text" name="username" lay-verify="required" lay-vertype="tips" placeholder="管理员 admin 普通用户 user" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="required" lay-vertype="tips" placeholder="密码 123456" autocomplete="off"
                       class="layui-input">
            </div>
            <div class="layui-input-inline" th:if="${loginVerify}">
                <input name="captcha" lay-verify="required" placeholder="验证码" style="width:50%;" type="text"
                       class="layui-input-inline layui-input">
                <img style="margin-bottom: 15px;" onclick="generateCaptcha(this)"
                     th:src="@{/captcha(timestamp=${new java.util.Date().getTime()})}"/>
            </div>
            <div class="layui-input-inline login-btn">
                <button lay-submit lay-filter="login" class="layui-btn layui-btn-blue">登录</button>
            </div>
            <hr/>
            <p>
                <a th:href="@{/register}" class="zadmin-left">立即注册</a>
                <a href="javascript:" class="zadmin-right">忘记密码？</a>
            </p>
            <br><br>
            <div class="layui-input-inline">
                <div class="layui-form-mid layui-word-aux layui-login-tips">第三方账号登录: </div>
                <img th:src="@{/images/github.png}" onclick="oauth2_github()" class="layui-login-oauth-icon" title="Github 登录">
                <img th:src="@{/images/gitee.png}" onclick="oauth2_gitee()" class="layui-login-oauth-icon" title="Gitee 登录">
            </div>
        </form>
    </div>

    <script th:src="@{/lib/jquery/jquery.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script th:src="@{/js/common.js}"></script>

    <script type="text/javascript">

        function oauth2_github() {
            $.get('/oauth2/render/github', function (data) {
                console.log(data);
                handlerResult(data, renderDone);
            });
        }

        function oauth2_gitee() {
            $.get('/oauth2/render/gitee', function (result) {
                handlerResult(result, renderDone);
            });
        }

        function renderDone(data) {
            var winObj = window.open(data, 'newwindow', 'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no');
            var loop = setInterval(function() {
                if(winObj.closed) {
                    clearInterval(loop);
                    window.location.href = '/main?=timestap'+ new Date().getTime();
                }
            }, 1000);
        }
        
        // 如果在 iframe 中, 则跳出 iframe
        if (self !== top) {
            top.location.href = location.href;
        }
        $(function () {
            layui.use(['form'], function () {
                // 操作对象
                var form = layui.form;
                form.on('submit(login)', function (data) {
                    $.post('login', data.field, function (result) {
                        handlerResult(result, loginDone);
                    });
                    return false;
                });
            });
        });


        function generateCaptcha(obj) {
            $(obj).attr("src", "/captcha?timestamp=" + (new Date()).valueOf());
        }

        function loginDone(obj) {
            layer.msg("登陆成功, 即将跳转到首页!", {
                icon: 1,
                time: 1000
            }, function () {
                location.href = '/main?=timestap'+ new Date().getTime();
            });
        }
    </script>
</body>
</html>